<!-- 我的团队 -->
<template>
	<view class="team-member">
		
		<view class="member-card">
			<view class="member-avatar">
				<image class="avatar-img" :src="item.avatar" mode=""></image>
				<view class="member-invitor" @click="showInviter=true">他的邀请人</view>
			</view>
			<view class="member-info">
				<view class="member-name">{{ item.nickname }}</view>
				<view class="member-id">ID号：{{ item.id }}</view>
				<view class="member-mobile">手机号：{{ item.mobile || '--'}}</view>				
			</view>
		</view>
		<!--下级粉丝-->
		<view class="team-data">
			
			<view class="team-item" @click="jump('/pages/app/agent/team-list', { type:'direct', pid: item.id })">
				<view class="item-title">直销粉丝</view>
				<view class="item-num"><text class="num">{{count.direct || 0}}</text>人</view>
			</view>
			
		
			<view class="team-item" @click="jump('/pages/app/agent/team-list', { type:'other', pid: item.id })">
				<view class="item-title">其他粉丝</view>
				<view class="item-num"><text class="num">{{ count.other || 0}}</text>人</view>
			</view>
			
		</view >

       <view class="team-data" v-if="type == 2" style="display:none">
            <view class="team-item" @click="jump('/pages/app/agent/view-list',{id:item.id, type:2, teamType: 1})">
                <view class="item-title">直推代理</view>
                <view class="item-num"><text class="num">{{item.agent && item.agent.child_agent_count_1}}</text>人</view>
            </view>

            <view class="team-item" @click="jump('/pages/app/agent/view-list',{id:item.id, type:2, teamType: 3})">
                <view class="item-title">其他代理</view>
                <view class="item-num"><text class="num">{{item.agent && (item.agent.child_agent_count - item.agent.child_agent_count_1 - item.agent.child_agent_count_2)}}</text>人</view>
            </view>
        </view>
		
		<!--收益情况-->
		<view class="income-card">
			<view class="income-title">
				<view class="title-left">收益情况</view>
				<!-- <view class="title-right">累计佣金<text class="money">{{item.agent && item.agent.total_income || 0.00}}</text>元</view> -->
			</view>
			<view class="income-box">
			<!--
			<u-tabs :list="listdate" :is-scroll="false" :current="current" active-color="#ee0000" @change="change"></u-tabs>
			-->
			<view class="income-list">
				<view class="income-item">
					<view class="item-title">直销总收益</view>
					<view class="item-num"><text class="num">{{ kpi.direct_amount || 0 }}</text>元</view>
				</view>
				<view class="income-item">
					<view class="item-title">直销总订单</view>
					<view class="item-num"><text class="num">{{ kpi.direct_num || 0}}</text>单</view>
				</view>
				<view class="income-item">
					<view class="item-title">总收益</view>
					<view class="item-num"><text class="num">{{ kpi.all_amount || 0.00}}</text>元</view>
				</view>
				<view class="income-item">
					<view class="item-title">总订单</view>
					<view class="item-num"><text class="num">{{ kpi.all_num || 0}}</text>单</view>
				</view>
			</view>
			</view>
		</view>

        <!--时间
        <view class="member-time">
			<view class="item-time">
				最近下单时间：-
			</view>
			<view class="item-time">
				最近登录时间：-
			</view>
			<view class="item-time">
				最近邀请时间：-
			</view>			
		</view>
		时间-->

		<u-popup v-model="showInviter" mode="center" border-radius="14" :closeable="true" width="400" height="360">
			<view class="pop-member-card">
				<view class="pop-member-avatar">
					<image class="avatar-img" :src="item.parent_user_info && item.parent_user_info.avatar" mode=""></image>
				</view>
				<view class="pop-member-info">
					<view class="member-name">{{item.parent_user_info && item.parent_user_info.nickname }}</view>
					<view class="member-id">ID号：{{item.parent_user_info && item.parent_user_info.id }}</view>
					<view class="member-mobile">手机号：{{ item.parent_user_info && item.parent_user_info.mobile }}</view>				
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {			
			mobile: '',
			showShare: false, //是否分享
			showInviter: false,
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			isEmpty: false,
			listdate: [{
				name: '今日预估'
			}, {
				name: '本月预估'
			}, {
				name: '上月预估',
			}],
			current: 0,
            type: 1,        // 1.团队，2.代理
			info: {},
			item:{},
			count:{},
			kpi:{},
			uid: null,
		};
	},
	computed: {},
	onLoad() {
		this.uid = this.$Route.query.id;
		this.getUserInfo();
		// this.getAgentInfo();
		this.myTeam()
		this.getKpi()
		this.type = this.$Route.query.type
	},
	methods: {
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		getUserInfo() {
			let that = this;
			that.$http('user.userInfo', {
				id: this.uid
			}).then(res => {
				console.log(res);
				if (res.code === 1) {
					that.item = res.data;
				}
			});
		},
		getAgentInfo() {
			let that = this;
			that.$http('user.selectData', {
				user_id: this.uid
			}).then(res => {
				console.log(res);
				if (res.code === 1) {
					that.info = res.data;
				}
			});
		},
		async myTeam() {
			const res = await this.$http('agent.teamCount', { uid: this.uid });
			if (res.code !== 0) this.count = res.data;
		},
		async getKpi() {
			const res = await this.$http('agent.kpi', { uid: this.uid });
			if (res.code !== 0) this.kpi = res.data;
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}

.pop-member-card{padding:20rpx;
  .pop-member-avatar{
	  width:120rpx;
	  height:120rpx;
	  margin:0 auto;
	  margin-top:20rpx;
	  .avatar-img{
		width:120rpx;
		height:120rpx;
		  border-radius:120rpx;
		  overflow:hidden;
		  
	  }
	  
	  }
	  
	  
}

.pop-member-info{
	text-align:center;
	line-height:200%;
	.member-name{
		font-weight:bold;
		margin-top:20rpx;
	font-size:28rpx;}
	
}
.num{font-weight:bold;margin-right:10rpx;}
.team-member{padding:20rpx;font-size:24rpx;color:#666}
.member-card{
	display:flex;	
	margin-top:20rpx;
	
	.member-avatar{
		width:150rpx;
		margin-right:20rpx;
		text-align:center;
		
		.avatar-img{
			width:120rpx;
			height:120rpx;
			border-radius:120rpx;
			overflow:hidden;
			margin:0 auto;
		}
		.member-invitor{
			border-radius:10rpx;
			padding:4rpx 10rpx;
			border:1rpx solid #eee;
			font-size:20rpx;
			width:150rpx;
			margin:0 auto;
			text-align:center;
		}		
	}
	.member-info{
		font-size:24rpx;
		line-height:200%;
		.member-name{
			font-size:32rpx;
			font-weight:bold;
			margin-bottom:20rpx;
		}
	}
	
	

}

.team-data{
	display:flex;
	align-items: center;
	margin:30rpx 0;
	padding:20rpx;
	border:1rpx solid #eee;
	border-radius:10rpx;
	.team-item{
		width:100%;
		margin:10rpx;
		line-height:200%;
		font-size:24rpx;
		
	}
}
   
.member-time{
	margin-top:30rpx;
	.item-time{
		line-height:300%
	}
	
}


.income-card{
	
	.income-title{
		display:flex;
		justify-content: space-between;
		line-height:200%;
		align-items: center;
		.title-left{
			font-size:28rpx;
			font-weight:bold;
			
		}
	}
	
	.income-box{
		border:1rpx solid #eee;
		margin:20rpx 0;
		padding:20rpx;
		border-radius:10rpx;
	}
	
	.income-list{
		display:flex;
		align-items: center;
		margin-top:20rpx;
		flex-wrap:wrap;
		.income-item{
			line-height:200%;
			width:calc(50% - 20rpx);
			margin:20rpx 10rpx;
			flex-shrink:0;
		}
	}
	
	
}
	
</style>
